<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本, 包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- vue的View部分, 负责数据的呈现 -->
		<div id="app">
			<p v-once>{{ message }}</p>
			<p>{{ message }}</p>
			<p v-html="h"></p>
			<p>{{ num + 3 }}- {{ num == 2 ? 9 : 0 }} - {{ message.split("").reverse().join("") }}</p>
		</div>
		
		<script type="text/javascript">
			// 相当于vue的Model, 负责数据的组织
			var datas = {
				message: "Hello World",
				h: "<h1>哒哒哒哒哒哒</h1>",
				num: 2
			};
			
			// 会锁定指定的数据.让修改不会影响绑定的控件
			// Object.freeze(datas);
			
			// 相当于vue的ViewModel, 负责Model与View的绑定
			var app= new Vue({
				el: "#app",
				data: datas
			});
			
			var vm = new Vue({
				data: {a: 1},
				// 在vue对象创建的时候执行, 此时el属性不可见,data属性可见
				create: function(){
					// alert(this.a)
					console.log('a is: ' + this.a);
				}
			});
			
		</script>
	</body>
</html>
